<template>
	<view>
		<crude v-if="PageCur=='crude'"></crude>
		<essence v-if="PageCur=='essences'"></essence>
		<crimp v-if="PageCur=='crimps'"></crimp>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="crude">
				<view :class="['tab-icon-block', PageCur == 'crude'?'bg-blue':'bg-white']">
					<text :class="['ph-cuyaquyu', 'font-size34', PageCur == 'crude'?'text-white':'text-gray']"></text>
				</view>
				<view :class="PageCur=='crude'?'text-blue':'text-gray'">粗轧</view>
			</view>
			<view class="action" @click="NavChange" data-cur="essences">
				<view :class="['tab-icon-block', PageCur == 'essences'?'bg-blue':'bg-white']">
					<text :class="['ph-jingyaquyu', 'font-size34', PageCur == 'essences'?'text-white':'text-gray']"></text>
				</view>
				<view :class="PageCur=='essences'?'text-blue':'text-gray'">精轧</view>
			</view>
			<view class="action" @click="NavChange" data-cur="crimps">
				<view :class="['tab-icon-block', PageCur == 'crimps'?'bg-blue':'bg-white']">
					<text :class="['ph-juanququyu', 'font-size34', PageCur == 'crimps'?'text-white':'text-gray']"></text>
				</view>
				<view :class="PageCur=='crimps'?'text-blue':'text-gray'">卷取</view>
			</view>
		</view>
	</view>
</template>

<script>
	import crimp from './crimp.vue'
	import crude from './crude.vue'
	import essence from './essence.vue'
	export default {
		components: {
			crimp,
			crude,
			essence
		},
		data() {
			return {
				PageCur: 'crude',
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

